import Taro from "@tarojs/taro";
import { memo, useEffect, useState } from "react";
import { ScrollView, Text, View } from "@tarojs/components";
import "./styles.scss";

function InfiniteLoading(props) {
  const [viewHeight, setViewHeight] = useState(0);

  const queryElementInfo = (ele) => {
    return new Promise((resolve) => {
      const query = Taro.createSelectorQuery();
      query
        .select(ele)
        .boundingClientRect((rec) => {
          resolve(rec);
        })
        .exec();
    });
  };

  useEffect(() => {
    queryElementInfo("#infinite-loading2").then(({ height }) => {
      setViewHeight(height);
    });
  }, [viewHeight]);

  return (
    <View id="infinite-loading2" className="infinite-loading">
      <ScrollView
        scrollY
        refresherEnabled
        scrollWithAnimation
        refresherTriggered={props.refreshing}
        onRefresherRefresh={props.onRefresh}
        onScrollToLower={props?.onLoad}
        style={{ height: `${viewHeight}px` }}
      >
        {props?.empty ? (
          <View style={{ textAlign: "center", paddingTop: "100" }}>
            <Text>暂无记录</Text>
          </View>
        ) : (
          props?.children
        )}
      </ScrollView>
    </View>
  );
}

export default memo(InfiniteLoading);
